<!--Template Name: vacayhome
File Name: gallery.html
Author Name: ThemeVault
Author URI: 
License URI: license/-->

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/icons/favicon.png"/>
    <title>vacayhome</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="fonts/antonio-exotic/stylesheet.css" rel="stylesheet">
    <link rel="stylesheet" href="css/lightbox.min.css">
    <link href="css/responsive.css" rel="stylesheet">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/jquery.imagesloaded.js"></script>
    <script src="js/masonry.pkgd.min.js"></script>
    <script src="js/lightbox-plus-jquery.min.js" type="text/javascript"></script>
    <script src="js/instafeed.min.js" type="text/javascript"></script>
    <script src="js/custom.js" type="text/javascript"></script>
    <style>
        .grid {
            background: rgba(0, 0, 0, 0);
        }

        /* clear fix */
        .grid:after {
            content: '';
            display: block;
            clear: both;
        }

        /* ---- .grid-item ---- */
        .grid-sizer,
        .grid-item {
            width: 33.34%;
        }

        .grid-item {
            float: left;
        }

        .grid-item img {
            display: block;
            max-width: 100%;
        }
    </style>
</head>
<body>
<div id="page">
    <!---header top---->
    <!---header top---->
    <div class="top-header" th:if="${#session}!=null">
        <div th:if="${#session.getAttribute('username') eq null} "><span th:include="front_header_top::html"></span></div>
        <div th:if="${#session.getAttribute('username') ne null} "><span th:include="front_header_top_login::html"></span></div>
    </div>
    <div class="top-header" th:if="${#session}==null">
        <span th:include="front_header_top::html"></span>
    </div>
    <!--header--->
    <div id="space"></div>
    <header class="header-container">
        <div class="container">
            <div class="top-row">
                <div class="row">
                    <div class="col-md-2 col-sm-6 col-xs-6">
                        <div id="logo">
                            <!--<a href="index.html"><img src="images/logo.png" alt="logo"></a>-->
                            <a href="/indexs"><span>云廊</span>酒店</a>
                        </div>
                    </div>
                    <div class="col-sm-6 visible-sm">
                        <div class="text-right">
                            <button type="button" class="book-now-btn">Book Now</button>
                        </div>
                    </div>
                    <div class="col-md-8 col-sm-12 col-xs-12 remove-padd">
                        <nav class="navbar navbar-default">
                            <div class="navbar-header page-scroll">
                                <button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle"
                                        type="button">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>

                            </div>
                            <div class="collapse navigation navbar-collapse navbar-ex1-collapse remove-space">
                                <ul class="list-unstyled nav1 cl-effect-10">
                                    <li><a data-hover="首页" href="/indexs"><span>首页</span></a></li>
                                    <li><a data-hover="关于" href="/about"><span>关于</span></a></li>
                                    <li><a data-hover="房间" href="/rooms"><span>房间</span></a></li>
                                    <li><a data-hover="画廊" href="/gallery"><span>画廊</span></a></li>
                                    <li><a data-hover="餐厅" href="/dinning"><span>餐厅</span></a></li>
                                    <li><a data-hover="新闻" href="/news"><span>新闻</span></a></li>
                                    <li><a data-hover="客服" href="/contact"><span>客服</span></a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                    <div class="col-md-2  col-sm-4 col-xs-12 hidden-sm">
                        <div class="text-right"><a href="/rooms">
                            <button type="button" class="book-now-btn">立即预订</button>
                        </a></div>
                    </div>
                </div>
            </div>
        </div>
    </header>


    <!--end-->
    <section class="image-head-wrapper">
        <div class="inner-wrapper">
            <h1></h1>
        </div>
    </section>
    <div class="clearfix"></div>

    <section class="gallery-block">
        <div class="container">
            <div class="row">
                <div class="grid hover-effect">
                    <div class="grid-sizer"></div>
                    <div class="grid-item percent37 gallery-image">
                        <a class="example-image-link img-responsive" href="images/gallery1-1.jpg"
                           data-lightbox="example-1"><img src="images/gallery1.png" class="img-responsive"
                                                          alt="gallery1"></a>
                    </div>
                    <div class="grid-item percent25 gallery-image">
                        <a class="example-image-link img-responsive" href="images/gallery2-2.jpg"
                           data-lightbox="example-1"><img src="images/gallery2.png" class="img-responsive"
                                                          alt="gallery1"></a>
                    </div>
                    <div class="grid-item percent37 gallery-image">
                        <a class="example-image-link img-responsive" href="images/gallery3-3.jpg"
                           data-lightbox="example-1"><img src="images/gallery3.png" class="img-responsive"
                                                          alt="gallery1"></a>
                    </div>
                    <div class="grid-item percent25 gallery-image">
                        <a class="example-image-link img-responsive" href="images/gallery4-4.jpg"
                           data-lightbox="example-1"><img src="images/gallery4.png" class="img-responsive"
                                                          alt="gallery1"></a>
                    </div>
                    <div class="grid-item percent37 gallery-image">
                        <a class="example-image-link img-responsive" href="images/gallery5-5.jpg"
                           data-lightbox="example-1"><img src="images/gallery5.png" class="img-responsive"
                                                          alt="gallery1"></a>
                    </div>
                    <div class="grid-item percent20 gallery-image">
                        <a class="example-image-link img-responsive" href="images/gallery6-6.jpg"
                           data-lightbox="example-1"><img src="images/gallery6.png" class="img-responsive"
                                                          alt="gallery1"></a>
                    </div>
                    <div class="grid-item percent20 gallery-image">
                        <a class="example-image-link img-responsive" href="images/gallery7-7.jpg"
                           data-lightbox="example-1"><img src="images/gallery7.png" class="img-responsive"
                                                          alt="gallery1"></a>
                    </div>
                    <div class="grid-item percent20 gallery-image">
                        <a class="example-image-link img-responsive" href="images/gallery8-8.jpg"
                           data-lightbox="example-1"><img src="images/gallery8.png" class="img-responsive"
                                                          alt="gallery1"></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!---footer--->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12 width-set-50">
                    <div class="footer-details">
                        <h4>联系方式</h4>
                        <ul class="list-unstyled footer-contact-list">
                            <li>
                                <i class="fa fa-map-marker fa-lg"></i>
                                <p>中国海南省三亚市海棠湾海棠北路701号</p>
                            </li>
                            <li>
                                <i class="fa fa-phone fa-lg"></i>
                                <p><a href="tel:+1-202-555-0100"> +1-202-555-0100</a></p>
                            </li>
                            <li>
                                <i class="fa fa-envelope-o fa-lg"></i>
                                <p><a href="mailto:demo@info.com"> demo@info.com</a></p>
                            </li>
                        </ul>
                        <div class="footer-social-icon">
                            <a href="#"><i class="fa fa-facebook"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-instagram"></i></a>
                            <a href="#"><i class="fa fa-google-plus"></i></a>
                            <a href="#"><i class="fa fa-youtube-play"></i></a>
                        </div>
                        <div class="input-group" id="subscribe">
                            <input type="text" class="form-control subscribe-box" value="" name="subscribe"
                                   placeholder="EMAIL ID">
                            <span class="input-group-btn">
                                        <button type="button" class="btn subscribe-button"><i
                                                class="fa fa-paper-plane fa-lg"></i></button>
                                    </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 width-50 width-set-50">
                    <div class="footer-details">
                        <h4>浏览</h4>
                        <ul class="list-unstyled footer-links">
                            <li><a data-hover="首页" href="/index"><span>首页</span></a></li>
                            <li><a data-hover="关于" href="/about"><span>关于</span></a></li>
                            <li><a data-hover="房间" href="/rooms"><span>房间</span></a></li>
                            <li><a data-hover="画廊" href="/gallery"><span>画廊</span></a></li>
                            <li><a data-hover="餐厅" href="/dinning"><span>餐厅</span></a></li>
                            <li><a data-hover="新闻" href="/news"><span>新闻</span></a></li>
                            <li><a data-hover="客服" href="/contact"><span>客服</span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="footer-details">
                        <h4>Now On Instagram</h4>
                        <div class="row">
                            <div class="instagram-images">
                                <div id="instafeed"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="copyright">
                &copy; 2017 All right reserved. Designed by <a href="#" target="_blank">ThemeVault.</a>
            </div>

        </div>
    </footer>

    <!--back to top--->
    <a style="display: none;" href="javascript:void(0);" class="scrollTop back-to-top" id="back-to-top">
        <span><i aria-hidden="true" class="fa fa-angle-up fa-lg"></i></span>
        <span>Top</span>
    </a>

</div>
<script>
    var grid = document.querySelector('.grid');

    var msnry = new Masonry(grid, {
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer',
        percentPosition: true
    });

    imagesLoaded(grid).on('progress', function () {
        // layout Masonry after each image loads
        msnry.layout();
    });
</script>
</body>
</html>
